<template>
    <div class="app-container">
        <el-row :gutter="20" class="header">
            <!-- <el-col :span="7">
                <el-input placeholder="请输入姓名..." v-model="queryForm.query" clearable></el-input>
            </el-col>
            <el-button type="primary" :icon="Search" @click="initTeaList">搜索</el-button> -->
        </el-row>
        <el-table :data="tableData" @selection-change="handleSelectionChange" stripe style="width: 100%">
            <el-table-column type="selection" width="55" />
            <!-- <el-table-column prop="avatar" label="头像" width="80" align="center">
          <template v-slot="scope">
            <img :src="getServerUrl() + 'media/userAvatar/' + scope.row.avatar" width="50" height="50" />
          </template>
</el-table-column> -->
            <el-table-column prop="stu_name" label="姓名" width="100" align="center" />
            <el-table-column prop="stu_phone" label="联系方式" width="120" align="center" />
            <el-table-column prop="stu_id" label="身份证号" width="180" align="center" />
            <el-table-column prop="stu_type" label="(专/学硕)" width="100" align="center" />
            <el-table-column prop="stu_politic_outlook" label="政治面貌" width="100" align="center" />
            <el-table-column prop="stu_graduate_school" label="本科院校" width="100" align="center" />
            <el-table-column prop="stu_graduate_major" label="本科专业" width="100" align="center" />
            <el-table-column prop="stu_grade_english" label="英语成绩" width="100" align="center" />
            <el-table-column prop="stu_grade_math" label="数学成绩" width="100" align="center" />
            <el-table-column prop="stu_grade_politics" label="政治成绩" width="100" align="center" />
            <el-table-column prop="stu_grade_procourse" label="专业课成绩" width="100" align="center" />
            <el-table-column prop="stu_grade_total" label="总分" width="100" align="center" />
            <!-- <el-table-column prop="roles" label="拥有角色" width="200" align="center">
          <template v-slot="scope">
            <el-tag size="small" type="warning" v-for="item in
    scope.row.roleList"> {{ item.name }}</el-tag>
          </template>
        </el-table-column> -->
            <!-- <el-table-column prop="status" label="状态？" width="200" align="center">
          <template v-slot="{ row }">
            <el-switch v-model="row.status" @change="statusChangeHandle(row)" active-text="正常" inactive-text="禁用"
              :active-value="1" :inactive-value="0">
            </el-switch>
          </template>
        </el-table-column> -->
            <el-table-column prop="stu_honor" label="获得荣誉" width="400" />
            <el-table-column prop="action" label="操作" width="200" fixed="right" align="center">
                <template v-slot="scope">
                    <!-- <el-button type="primary" :icon="Tools" @click="handleRoleDialogValue(scope.row.stu_id, scope.row.roleList)">分配角色
            </el-button> -->
                    <!-- 重置密码 -->
                    <!-- <el-popconfirm v-if="scope.row.username != 'python222'" title="您确定要对这
    个用户重置密码吗？" @confirm="handleResetPassword(scope.row.stu_id)">
              <template #reference>
                <el-button type="warning" :icon="RefreshRight">重置密码</el-button>
              </template>
    </el-popconfirm> -->
                    <el-popconfirm :title="confirm_title" @confirm="delSelectStu(scope.row)">
                        <template #reference>
                            <el-button type="danger" :icon="Remove" @click="changeTitle(scope.row)" >退选</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>

</template>
<script setup>
import { Search, Delete, DocumentAdd, Position, Remove } from '@element-plus/icons-vue'
import { ref } from 'vue'

// 请求api
import { getSelectStu, handleDelSelectStu } from "@/api/stu_teacher"
// 公共方法
import { toast } from '@/util/util'


// 用户
let user = JSON.parse(sessionStorage.getItem("currentUser"))


// 退选
const confirm_title = ref("确认退选学生吗？")
const changeTitle = (row) => {
    if (row.stu_name) {
        confirm_title.value = "确认退选学生 " + row.stu_name + " 吗？"
    } else {
        confirm_title.value = "确认退选学生吗？"
    }
}



// 列表数据
const tableData = ref([])

// 初始化导师列表
const initStuList = async () => {
    if (user.roles.includes("导师")) {
        await getSelectStu({
            teacher_id: user.username
        }).then(res => {
            tableData.value = res.data.select_stus;
        }).catch(e => {
            toast(e.message, 'error')
        })
    } else {
        toast("您当前登录的角色没有导师身份！", "error")
    }

}
initStuList();


// 退选学生
const delSelectStu = async (row) => {
    await handleDelSelectStu({
        teacher_id: user.username,
        stu_id: row.stu_id,
    }).then(res => {
        if (res.data.code == 200) {
            toast("退选成功！")
            initStuList()
        } else {
            toast(res.data.message, 'error')
            initStuList()
        }
    }).catch(e => {
        toast("网络请求错误！", 'error')
    })

}
</script>

<style lang="scss" scoped>
.header {
    padding-bottom: 16px;
    box-sizing: border-box;
}

.el-pagination {
    float: right;
    padding: 20px;
    box-sizing: border-box;
}

::v-deep th.el-table__cell {
    word-break: break-word;
    background-color: #f8f8f9 !important;
    color: #515a6e;
    height: 40px;
    font-size: 13px;
}

.el-tag--small {
    margin-left: 5px;
}
</style>